<template>
<div >


  <!--    高查    -->
  <el-row justify="start">
    <el-col :span="24">
      <div style="margin-top: 15px;">
        <el-form :inline="true" v-model="recordFileFormData"  class="demo-form-inline">

          <el-form-item >
            <el-input v-model="recordFileFormData.fileName" placeholder="文件名称" ></el-input>
          </el-form-item>
          <el-form-item >
            <el-select v-model="recordFileFormData.fileTypeId" placeholder="文件类型">
              <el-option label="全部" value=""></el-option>
              <el-option v-for=" ft in queryFileTypeSelect" :key="ft.id" :label="ft.typename" :value="ft.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getRecordFileByid">查询</el-button>
          </el-form-item>

          <el-button icon="el-icon-tickets" @click="fileShangChuan" >文件上传</el-button>


        </el-form>
      </div>
    </el-col>
  </el-row>


  <el-table
      :data="recordFileData"
      style="width: 100%">
    <el-table-column
        prop="id"
        label="编号">
    </el-table-column>
    <el-table-column
        prop="fileName"
        label="文件名称">
    </el-table-column>
    <el-table-column
        prop="typeName"
        label="文件类型">
    </el-table-column>
    <el-table-column
        prop="fileUploadPerson"
        label="上传人">
    </el-table-column>
    <el-table-column
        prop="fileUploadDate"
        label="上传时间">
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作">
      <template slot-scope="scope">

        <el-dropdown placement="bottom" trigger="click">
          <el-button type="text" size="small">操作</el-button>
          <el-dropdown-menu slot="dropdown">

            <el-dropdown-item  @click.native="delBtn(scope.row)">删除</el-dropdown-item>
            <el-dropdown-item  @click.native="updateBtn(scope.row)">修改</el-dropdown-item>
            <el-dropdown-item @click.native="downloadBtn(scope.row)">下载</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </template>
    </el-table-column>
  </el-table>
<!--  分页  -->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[2, 4, 6, 8]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageData.total">
  </el-pagination>



  <!--   文件上传对话框  -->
  <el-dialog
      title="文件上传"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">

    <el-form label-position="top"  :model="addFileForm">
      <el-form-item label="文件名称">
        <el-input v-model="addFileForm.fileName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="文件类型">
        <el-select v-model="addFileForm.fileTypeId" placeholder="请选择">
          <el-option v-for=" ft in queryFileTypeSelect" :key="ft.id" :label="ft.typename" :value="ft.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请选择文件">

<!--            :http-request="addFile" -->

        <el-upload
            style="height: 10px"
            ref="upload"
            action=""
            :before-upload="beforeUpload"
            :http-request="addFile"
            :limit=1>
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>





      </el-form-item>
    </el-form>


    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click=" addRecordFile">确 定</el-button>
  </span>
  </el-dialog>


  <!--   修改对话框  -->
  <el-dialog
      title="修改文件"
      :visible.sync="updatedialog"
      width="50%"
      :before-close="upHandleClose">

    <el-form label-position="top"  :model="updateFileForm">
      <el-form-item label="文件名称">
        <el-input v-model="updateFileForm.fileName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="文件类型">
        <el-select v-model="updateFileForm.fileTypeId" placeholder="请选择">
          <el-option v-for=" ft in queryFileTypeSelect" :key="ft.id" :label="ft.typename" :value="ft.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请选择文件">



        <el-upload
            style="height: 10px"
            ref="upload"
            action=""
            :before-upload="beforeUpload"
            :http-request="addFile"
            :limit=1>
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>

        <div style="height: 70px"></div>

        <div class="block" >
          <el-image  :src="updateFileForm.filePath" @click="datu">
            <div slot="error" class="image-slot">
              <div class="imgjiazai">文件加载失败...</div>
            </div>
          </el-image>
        </div>

        <el-divider></el-divider>

<!--        <div v-if="vif" style="height: 100%">-->
<!--          <el-image  :src="updateFileForm.filePath" >-->
<!--          </el-image>-->
<!--        </div>-->

      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click=" upRecordFile">确 定</el-button>
  </span>
  </el-dialog>





</div>

</template>

<script>



export default {
  name: "MyRecordFile",
  data(){
    return{
      // Loading:true,
      vif:false, // 大图预览
      updatedialog:false, // 控制修改对话框
      dialogVisible:false, // 控制文件上传对话框
      queryFileTypeSelect:[], //下拉框数据
      recordFileData:[],
      pageData:{}, // 存放分页数据
      getType:"recordFile",// 标识这个get请求时做什么的
      recordFileFormData:{
        fileUploadPerson: JSON.parse(localStorage["user"])[0].userRealname ,// 上传人姓名
        getType:"recordFile",// 标识这个get请求时做什么的
        pageCur:"1",//页码
        pageSize:"2"//每页显示多少
      }, // 高级查询数据
      addFileForm:{
        fileUploadDate:"",// 当前时间
        filePath:"",
        fileUploadPerson:JSON.parse(localStorage["user"])[0].userRealname
      },// 文件上传数据
      updateFileForm:{
        id:"",
        fileUploadDate:"",// 当前时间
        filePath:"",// 文件地址
        fileUploadPerson:JSON.parse(localStorage["user"])[0].userRealname // 当前登陆者
      },//修改文件数据
      imgSrcs:"",// 大图预览
    }
  },
  created() {
    this.getRecordFileByid();
    this.queryFileType();
  },
  methods:{
    getRecordFileByid(){

      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$http.get("recordFile",{params:this.recordFileFormData})
          .then(res => {


            setTimeout(() => {
              loading.close();
            });

            this.recordFileData=res.data.data.list
            this.pageData = res.data.data
            // this.Loading = false
            // this.$emit("addOk")
          })
          .catch()
    },
    handleSizeChange(val){
      this.recordFileFormData.pageSize=val
      this.getRecordFileByid();
    },
    handleCurrentChange(val){
      this.recordFileFormData.pageCur=val
      this.getRecordFileByid()

    },

    queryFileType(){
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$http.get("fileType",{params:{getType:"select"}})
          .then(res => {
            setTimeout(() => {
              loading.close();
            });
            this.queryFileTypeSelect=res.data.data
          })
          .catch()
    },
    beforeUpload(file){
      this.file=file
      this.fileName=file.name
    },

    addFile(){// 上传文件
      // let formatData=new FormData();
      // formatData.append('file',this.file,this.fileName)
      // let requestConfig={
      //   headers:{
      //     'Content-Type':'multipart/form-data'
      //   }
      // }
      // this.$http.post("file", formatData,requestConfig)
      //     .then(res => {
      //       // console.log("地址:"+res.data.data)
      //       this.addFileForm.filePath =res.data.data
      //     })
    },
    addRecordFile(){// 添加
      this.addFileForm.fileUploadDate=new Date().toLocaleDateString()

      if(this.file == '' || this.fileName == '' || this.file == null || this.fileName == null){
        this.$message.error('未选择文件!');

      }else {

        let formatData = new FormData();
        formatData.append('file', this.file, this.fileName)
        let requestConfig = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        this.$http.post("file", formatData, requestConfig)
            .then(res => {
              const loading = this.$loading({
                lock: true,
                text: '正在载入...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
              });
              this.addFileForm.filePath = res.data.data

              this.$http.post("recordFile", this.addFileForm)
                  .then( () => {
                    setTimeout(() => {
                      loading.close();
                    });
                    this.$message({
                      message: '添加成功!',
                      type: 'success'
                    });
                    this.getRecordFileByid()
                    this.dialogVisible = false
                  })

            })


        // this.$http.post("recordFile",this.addFileForm)
        //     .then(
        //         this.dialogVisible=false
        //     )
      }
    },
    fileShangChuan(){
      this.dialogVisible=true
    },
    handleClose(done) {
      this.$confirm('确认放弃文件上传!')
          .then(() => {
            done();
          })
          .catch( () => {});
    },
    upHandleClose(done) {
      this.$confirm('确认放弃修改!')
          .then(() => {
            done();
          })
          .catch( () => {});
    },
    downloadBtn(row){// 下载
      document.location.href=row.filePath
    },
    delBtn(row){

      this.$confirm('确认删除？')
            .then( ()  => {
              const loading = this.$loading({
                lock: true,
                text: '正在载入...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
              });
              this.$http.delete(`recordFile/${row.id}`)
                  .then( () => {
                    setTimeout(() => {
                      loading.close();
                    });
                    this.$message({
                      message: '删除成功!',
                      type: 'success'
                    });
                    this.getRecordFileByid()
                  })
                  .catch()
            })
            .catch(() => {});


      // this.$http.delete(`recordFile/${row.id}`)
      // .then(
      //     this.getRecordFileByid()
      // )
      // .catch()
    },
    updateBtn(row){ // 修改
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$http.get(`recordFile/${row.id}`)
      .then(res => {
        setTimeout(() => {
          loading.close();
        });
        // console.log(res.data.data)
        this.updateFileForm=res.data.data
        // this.imgSrcs=this.updateFileForm.filePath // 把图片地址赋值大图预览
        this.updatedialog=true // 显示修改对话框
      })
      .catch()

    },
    upRecordFile(){
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.updateFileForm.fileUploadDate=new Date().toLocaleDateString() // 修改时间 ( 当前时间 )
      this.$http.put(`recordFile`,this.updateFileForm)
      .then( () => {
        setTimeout(() => {
          loading.close();
        });
        this.$message({
          message: '修改成功!',
          type: 'success'
        });
        this.getRecordFileByid()
        this.updatedialog = false
      })
      .catch()
    },
    datu(){
      this.vif=!this.vif
    }

  }


}
</script>

<style scoped>

.imgjiazai{
  font-size: 20px;
}

.block {
  height: 300px;
  text-align: center;
}

/*.el-dialog__wrapper{*/
/*  z-index: 1000 !important;*/
/*}*/

</style>